import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:flutter_drawing_board/flutter_drawing_board.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:little_painter/modules/drawing_board/widget/actions_menu_widget.dart';
import 'package:little_painter/modules/drawing_board/widget/db_test_widget.dart';
import 'package:little_painter/modules/drawing_board/widget/tools_menu_widget.dart';
import 'package:styled_widget/styled_widget.dart';

import '../../../utils/logger_utils.dart';
import '../../../utils/router_utils.dart';
import '../../../widget/base_widget.dart';
import '../controller/drawing_board_controller.dart';
import '../widget/color_picker_widget.dart';

/// 画板
class DrawingBoardPage extends StatefulWidget {
  const DrawingBoardPage({Key? key}) : super(key: key);

  @override
  State<DrawingBoardPage> createState() => _DrawingBoardPageState();
}

class _DrawingBoardPageState extends State<DrawingBoardPage> {
  @override
  void initState() {
    super.initState();

    /// 设置为横屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  @override
  Widget build(BuildContext context) {
    LogUtils.d('DrawingBoardPage build');

    return Scaffold(
      body: GetBuilder<DrawingBoardController>(
        init: DrawingBoardController(),
        builder: (controller) {
          return Stack(
            children: [
              // 画布
              Positioned.fill(child: _drawingBoardWidget(controller)),
              // 顶部操作栏
              Positioned(
                top: 40.r,
                left: 12.r,
                right: 12.r,
                child: Row(
                  children: [
                    _backWidget(),
                    const Spacer(),
                    ActionsMenuWidget(onItemTapped: (index, controller) {
                      controller.closeMenu!();
                    }),
                  ],
                ),
              ),
              // 底部工具栏
              Positioned(
                bottom: 12.r,
                left: 12.r,
                right: 12.r,
                child: Row(
                  children: [
                    const DbTestWidget(),
                    const Spacer(),
                    const ColorPickerWidget(),
                    SizedBox(width: 12.r),
                    ToolsMenuWidget(
                      onItemTapped: (index, controller) {
                        if (index != 6) {
                          controller.closeMenu!();
                        }
                      },
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  /// 画布
  Widget _drawingBoardWidget(DrawingBoardController controller) {
    return DrawingBoard(
      controller: controller.getController(),
      background: Container(width: 1.sw, height: 1.sh, color: Colors.white),
      showDefaultActions: false, // 开启默认操作选项
      showDefaultTools: false, // 开启默认工具栏
    );
  }

  /// 返回
  Widget _backWidget() {
    return const BackIcon()
        .padding(horizontal: 10.r, vertical: 6.r)
        .backgroundColor(Colors.black12)
        .clipRRect(all: 6.r)
        .gestures(onTap: () {
      RouterUtils.back();
    });
  }

  /// 恢复默认方向
  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    super.dispose();
  }
}
